<template>
    <div class="header">
        <div class="header_left">
            <p>叩丁狼电商运营平台</p>
            <el-icon @click="$emit('changeIsCollapseFn', !isCollapse)">
                <Menu />
            </el-icon>
        </div>
        <el-dropdown @command="commandHandle">
            <span class="el-dropdown-link">
                {{ userStore.username }}
                <el-icon>
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="index">首页</el-dropdown-item>
                    <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>

<script setup lang="ts">
import { ArrowDown, Menu } from '@element-plus/icons-vue'
import { useUserState } from "@/store/user"
import { useRouter } from "vue-router"
import { logOut } from "@/common/loginOut";
import { ElMessage } from 'element-plus';
import { logOutAPI } from "@/http/api"
const { isCollapse } = defineProps(['isCollapse'])
const userStore = useUserState()
const router = useRouter()

const commandHandle = (command: string) => {
    if (command === 'index') {
        router.push("/index")
    } else if (command === "loginOut") {

        logOut(() => {
            logOutAPI()
        }, () => {
            ElMessage.success("退出成功")

        })
    }
}
</script>

<style scoped lang="less">
.header {
    height: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: space-between;

    .header_left {
        font-size: 24px;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        justify-items: center;

        :deep(.el-icon) {
            margin: 5px 0 0 10px;
        }
    }


    :deep(.el-dropdown-link) {
        color: #fff;
    }
}
</style>